<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/style.min.css">
    <title>退货退款详情</title>
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body>
    <div id="personal_center">
        <div class="t-container">
            <header class="cl" v-show="header.show">
                <div class="nav-bar cl">
                    <span class="goback arrow_l" @click="goback"></span>
                    <span class="page-name" v-cloak>{{shop_name}}会员店</span>
                </div>
            </header>
            <div class="t-main">
                <div class="t-whole-main t-order-details-main">
                    <div class="t-whole-goods-item t-return-goods-item">
                        <div class="t-whole-header">
                            <h3 class="srefund-detail-title" v-cloak>退款单{{info_refund.refundSn}}{{info_refund.type}}详情</h3>
                        </div>
                        <div class="t-input-group">
                            <label>退款状态：</label>
                            <span v-if="info_refund.status == -10">退款失败</span>
                            <span v-if="info_refund.status == 0">退款关闭</span>
                            <span v-if="info_refund.status == 10">待审核</span>
                            <span v-if="info_refund.status == 20">待买家退款</span>
                            <span v-if="info_refund.status == 30">待卖家退款</span>
                            <span v-if="info_refund.status == 40 && info_refund.payStatus == 3">退货退款成功</span>
                            <span v-if="info_refund.status == 40 && (info_refund.payStatus == 0 || info_refund.payStatus == 2)">退款失败</span>
                            <span v-if="info_refund.status == 40 && (info_refund.payStatus != 3 && info_refund.payStatus != 0 && info_refund.payStatus != 2)">退款中</span>
                            <span v-if="info_refund.status == 50">卖家拒绝退款</span>
                            <span v-if="info_refund.status == 60">待平台介入</span>
                        </div>
                        <div class="t-input-group">
                            <label>售后类型：</label>
                            <span v-cloak>{{info_refund.type}}</span>
                        </div>
                        <div class="t-input-group">
                            <label>退款原因：</label>
                            <span v-cloak>{{info_refund.reason}}</span>
                        </div>
                        <div class="t-input-group">
                            <label>退款金额：</label>
                            <span v-cloak>￥{{info_refund.money}}</span>
                        </div>
                        <div class="t-input-group">
                            <label>退款说明：</label>
                            <span v-cloak>{{info_refund.desc}}</span>
                        </div>
                        <div class="t-input-group">
                            <label>已上传照片：</label>
                            <div class="rg-file">
                                <ul>
                                    <li v-for="item in info_refund.img">
                                        <img :src="item" alt="" class="up-img">
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="t-gap-box"></div>
                    <div class="t-whole-goods-item t-return-goods-datails-item">
                        <div class="t-whole-header">
                            <h3>退款进度</h3>
                            <!-- <span>待卖家付款</span> -->
                        </div>
                    </div>
                    <div class="t-whole-goods-item t-logistic-status-item t-return-goods-datails-item">
                        <ul>
                            <li :class="{'active':index == 0}" v-for="(item,index) in info_progress">
                                <i><em></em></i>
                                <p v-cloak>{{item.nickname+item.content}}</p>
                                <p v-cloak>{{item.time}}</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="t-footer rgd-footer">
            <a href="javascript:void(0)" class="t-rgd-btn" @click="cancel" v-if="info_refund.status == 10 || info_refund.status == 20 || info_refund.status == 30">撤销</a>
            <a href="javascript:void(0)" class="t-rgd-btn active" @click="modify" v-if="info_refund.status == 10 && info_refund.auditStep == 0">修改</a>
            <a href="javascript:void(0)" class="t-rgd-btn active" @click="writelog" v-if="info_refund.status == 20">填写物流</a>
            <a href="javascript:void(0)" class="t-rgd-btn active" @click="readlog" v-if="info_refund.status == 30">查看物流</a>
            <a href="javascript:void(0)" class="t-rgd-btn sfull active" @click="back" v-if="info_refund.status == -10 || info_refund.status == 0 || info_refund.status == 40 || info_refund.status == 50 || info_refund.status == 60">返回</a>
        </div>
        <toast ref="toast" style="z-index: 20001;"></toast>
        <confirm ref="confirm"></confirm>
        <alerts ref="alerts"></alerts>
    </div>
    <script type="text/x-template" id="tpl-confirm-content">
        <div class="refund-submit-form">
            <p>
                <label>物流公司：</label>
                <input type="text" name="" value="" id="log_company">
            </p>
            <p>
                <label>物流单号：</label>
                <input type="text" name="" value="" id="log_sn">
            </p>
            <p>
                <label>联系电话：</label>
                <input type="text" name="" value="" id="log_tel">
            </p>
            <span>为确保您的货物顺利送达，物流信息真实有效，请保持您的联系电话畅通</span>
        </div>
    </script>
    <script type="text/x-template" id="tpl-alert-content">
        <div class="logistics-info">
            <p>物流公司:<span id="log_company_show"></span></p>
            <p>物流单号:<span id="log_sn_show"></span></p>
        </div>
    </script>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>
    <script>
        var toast = component.popup.toast(),
            confirm = component.popup.confirm({
                name: 'confirm',
                type: 'confirm'
            }),
            alerts = component.popup.confirm({
                name: 'alert',
                type: 'alert'
            });
        var app = new Vue({
            el: '#personal_center',
            data: function() {
                return {
                    header: {
                        show: !APP.iswechat()
                    },
                    id: APP.getQueryString('rid'),
                    oid: APP.getQueryString('oid'),
                    store_id: APP.getQueryString('storeid'),
                    info_order: {},
                    info_refund: {},
                    info_progress: [],
                    refund_reason: {
                        '1': '退运费',
                        '2': '商品瑕疵',
                        '3': '质量问题',
                        '4': '颜色/尺寸/参数不符',
                        '5': '少件/漏发',
                        '6': '收到商品时候有划痕/破损',
                        '7': '假冒品牌',
                        '8': '发票问题',
                        '99': '其他'
                    },
                    component: {
                        alert: [{
                            title: '查看物流信息',
                            content: document.getElementById('tpl-alert-content').innerHTML,
                            cancel: '关闭'
                        }]
                    },
                    shop_name: ''
                }
            },
            mounted: function() {
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                }.bind(this), function(arg) {
                    this.shop_name = arg.body.data.shop.shop_name;
                }.bind(this));
                Vue.http.get(APIJAVA + '/c/mobie/refund/getOrderRefundInfo?shopId=' + this.store_id + "&id=" + this.oid, {}, {
                    emulateJSON: true
                }).then(function(_res) {
                    var _re = _res.body;
                    this.info_order = {

                    };
                    this.info_refund = {
                        id: _re.refund.id,
                        type: _re.refund.type == 1 ? '退款' : '退款退货',
                        reason: this.refund_reason[_re.refund.refundReason],
                        money: _re.refund.refundAmount,
                        desc: _re.refund.refundNote,
                        refundSn: _re.refund.orderRefundSn,
                        status: _re.refund.status,
                        img: [],
                        auditStep: _re.refund.auditStep,
                        logisticsCompany: _re.refund.logisticsCompany,
                        logisticsSn: _re.refund.logisticsSn,
                        logisticsPhone: _re.refund.logisticsPhone,
                        payStatus: _re.refund.payStatus,
                        operationAllowed:_re.order.operationAllowed,
                    };
                    _re.uimg1 && this.info_refund.img.push(_re.uimg1);
                    _re.uimg2 && this.info_refund.img.push(_re.uimg2);
                    _re.uimg3 && this.info_refund.img.push(_re.uimg3);
                    _re.uimg4 && this.info_refund.img.push(_re.uimg4);
                    _re.traces.forEach(function(v, k) {
                        if(v.role == 1) {
                            this.info_progress.push({
                                nickname: '买家' + ' ' + v.nickname,
                                content: v.content,
                                time: v.ctime
                            });
                        } else if(v.role == 2) {
                            this.info_progress.push({
                                nickname: '卖家' + ' ' + v.nickname,
                                content: v.content,
                                time: v.ctime
                            });
                        } else if(v.role == 3) {
                            if(_re.orderType == 30) {
                                this.info_progress.push({
                                    nickname: '卖家' + ' ' + v.order.sellerAccount,
                                    content: v.content,
                                    time: v.ctime
                                });
                            } else {
                                this.info_progress.push({
                                    nickname: '卖家' + ' ' + v.nickname,
                                    content: v.content,
                                    time: v.ctime
                                });
                            }
                        }
                        
                    }.bind(this));

                }.bind(this));

            },
            components: {
                'toast': toast,
                'confirm': confirm,
                'alerts': alerts
            },
            methods: {
                goback: function() {
                    window.history.go(-1);
                },
                formatTime: function(nows) {
                    var now = new Date(nows);
                    var year = now.getFullYear();
                    var month = now.getMonth() + 1;
                    var date = now.getDate();
                    var hour = now.getHours();
                    var minute = now.getMinutes();
                    var second = now.getSeconds();
                    return year + "-" + (month < 10 ? ('0' + month) : month) + "-" + (date < 10 ? ('0' + date) : date) + " " + (hour < 10 ? ('0' + hour) : hour) + ":" + (minute < 10 ? ('0' + minute) : minute) + ":" + (second < 10 ? ('0' + second) : second);
                },
                cancel: function() {
                    this.$refs.confirm.show({
                        type: 'confirm',
                        title: '提示',
                        content: '是否撤销退款',
                        cancelText: '取消',
                        confirmText: '确定',
                        confirm: function() {
                            Vue.http.get(APIJAVA + 'c/mobie/refund/cancel?shopId=' + this.store_id + '&id=' + this.id, {}, {
                                emulateJSON: true
                            }).then(function(_res) {
                                if (_res.body.code == 1) {
                                    this.$refs.toast.show('撤销成功');
                                    setTimeout(function() {
                                        window.location.reload();
                                    }, 2000);
                                } else {
                                    this.$refs.toast.show('撤销失败');
                                }
                            }.bind(this));
                        }.bind(this)
                    });
                },
                writelog: function() {
                    this.$refs.confirm.show({
                        type: 'confirm',
                        title: '退货给卖家',
                        content: document.getElementById('tpl-confirm-content').innerHTML,
                        cancelText: '返回',
                        confirmText: '确认退货',
                        confirm: function() {
                            var log_company = document.getElementById('log_company'),
                                log_sn = document.getElementById('log_sn'),
                                log_tel = document.getElementById('log_tel');
                            if (log_company.value == '') {
                                this.$refs.toast.show('请填写物流公司名称');
                                return true;
                            }
                            if (log_sn.value == '') {
                                this.$refs.toast.show('请填写物流单号');
                                return true;
                            }
                            if (log_tel.value == '') {
                                this.$refs.toast.show('请填写联系电话');
                                return true;
                            }
                            Vue.http.post(APIJAVA + 'c/mobie/refund/updateLogistics', {
                                id: item.refundId,
                                logisticsCompany: log_company.value,
                                logisticsSn: log_sn.value,
                                logisticsPhone: log_tel.value,
                                shopId: this.store_id
                            }, {
                                emulateJSON: true
                            }).then(function(_res) {
                                if (_res.body.code == 1) {
                                    window.location.reload();
                                } else {
                                    this.$refs.toast.show('退货失败');
                                }
                            });
                        }.bind(this)
                    });
                },
                readlog: function() {
                    this.$refs.alerts.show({
                        title: '查看物流信息',
                        content: document.getElementById('tpl-alert-content').innerHTML,
                        confirmText: '关闭'
                    });
                    setTimeout(function() {
                        document.getElementById('log_company_show').innerHTML = this.info_refund.logisticsCompany;
                        document.getElementById('log_sn_show').innerHTML = this.info_refund.logisticsSn;
                    }.bind(this));
                },
                modify: function() {
                    window.location.href = "return-goods.html?isedit=1&storeid=" + this.store_id + "&rid=" + this.info_refund.id + '&id=' + this.oid;
                },
                back: function() {
                    window.history.back();
                }
            }
        })
    </script>
</body>

</html>